<template>
	<view>
		<view>
			<view class="cu-bar bg-white fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索活动名称、活动类型" confirm-type="search" v-model.lazy="keywords"
						@focus="showHistory" @blur="hideHistory"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @click="search">搜索</button>
				</view>
			</view>
			<view v-if="isShowHistory" class="bg-white search-history padding-top-sm">
				<view class="padding-lr-sm bg-white justify-between flex padding-bottom-sm" style="width: 750upx;">
					<text class="text-df text-grey">搜索历史</text>
					<text class="cuIcon-delete text_lg text-green" @click="showModal($event, 'DialogModal1')"></text>
				</view>
				<view class="flex flex-wrap bg-white">
					<view class="padding-xs" v-for="(item, index) in historyList" :key="index">
						<view class="cu-tag line-olive round" @click="fromHistory($event, index)">{{item}}</view>
					</view>
				</view>
			</view>
		</view>

		<view :class="modalName=='DialogModal1'?'show':''" class="cu-modal">
			<view class="cu-dialog">
				<view class="padding-xl text-df">
					确认清楚全部历史记录吗?
				</view>
				<view class="cu-bar justify-end" style="background-color: #f8f8f8;">
					<view class="action">
						<button class="cu-btn line-green text-green" @click="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @click="clearHistory">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "searchBar",
		data() {
			return {
				CustomBar: this.CustomBar,
				keywords: '',
				isShowHistory: false,
				historyList: [],
				modalName: ''
			}
		},
		computed: {
			isHistoryEmpty() {
				return this.historyList.length > 0
			}
		},
		methods: {
			showHistory() {
				this.isShowHistory = true
			},
			hideHistory() {
				this.isShowHistory = false
			},
			clearHistory() {
				this.historyList = []
				this.modalName = null
			},
			fromHistory(event, index) {
				uni.navigateTo({
					url: '/pages/searchDetail/searchDetail?key=' + this.historyList[index],
					success: (res) => {
						this.historyList.unshift(this.historyList[index])
						this.historyList.splice(index + 1, 1)
					}
				})
			},
			showModal(event, modal) {
				this.modalName = modal
			},
			hideModal() {
				this.modalName = null
			},
			search() {
				uni.navigateTo({
					url: '/pages/searchDetail/searchDetail?key=' + this.keywords,
					success: (res) => {
						const set = new Set(this.historyList)
						if (set.has(this.keywords)) {
							set.delete(this.keywords)
							let list = Array.from(set)
							list.unshift(this.keywords)
							this.historyList = list
						} else {
							this.historyList.unshift(this.keywords)
						}
					}
				})
			},
		}

	}
</script>

<style>
	.search {
		/* 		position: sticky;
		top: 0; */
		z-index: 1024;
	}

	.search-history {
		border-bottom: 1upx solid #efefef;
		z-index: 1024;
		position: fixed;
	}

	.history_title {
		display: flex;
		justify-content: space-between;
		width: 750upx;
	}
</style>
